
<template>
  <main-container headerText="订单管理 >> 订单详情">
    <div class="content">

      <div class="content-wrap" :key="showPageKey">
        <detail-info-box
          infoType="three"
          :infoData="infoData1"
          mainTitle="订单详情"
        />

        <simple-table 
          :tableData="goodsDataConfig"
          :noDataTips="'备注：该项不包含商品数据'"
        />
        
      </div>
    </div>
  </main-container>
</template>

  <script>
import jhTools from "@/utils/jhTools"; //工具函数
import API from "@/utils/api_config.js"; //引入api

import main_container from "@/components/main_container";
import top_option from "@/components/subCon/topOption";
import input_search from "@/components/subCon/inputSearch";
import select_search from "@/components/subCon/selectSearch";
import date_search from "@/components/subCon/dateSearch";

export default {
  components: {
    "main-container": main_container,
    "top-option": top_option,
    "input-search": input_search,
    "select-search": select_search,
    "date-search": date_search,
    "detail-info-box": () => import("@/components/detail_info_box"),
    "detail-info-box-vertical": () =>
      import("@/components/detail_info_box_vertical"),
    "icon-title": () => import("@/components/iconTitle"),
    "simple-table": () => import("@/components/simpleTable"),
  },
  props: {},
  data() {
    return {
      showPageKey: 100,
      //列表
      tableData: [],
      multipleSelection: [],
      //分页
      currentPageIdx: 1, //当前页与跳转框的初始值
      pageCount: 1000, //总条数
      onePageSize: 10, //每页的条数

      formData: {},
      goodsDataConfig: { itemConfig: [], listData: [] }, //商品数据集，初始值也要为对象

      allMethods: "",
      infoData1: {},
    };
  },
  mounted() {
    this.allMethods = this.getAllMethods();
    this.getDetail();
  },
  methods: {
    //详情
    getDetail() {
      this.allMethods.getDetail();
    },
    //消息
    handleShowMessage (msg, type){
      this.$message({
        type: type || 'warning',
        message: msg
      })
    },
    //组件数据格式化
    handleFormatDetailConData () {
      this.allMethods.handleFormatDetailConData();
    },

    /* 方法抽离集合 */
    getAllMethods() {
      var _this = this;
      return {
        //详情
        getDetail() {
          var id = _this.$route.query.id;
          var url = API.order_m.order_detail;
          var data = {
            id,
          };
          console.log("详情p", data);
          jhTools.get(
            url,
            null,
            data,
            (res) => {
              console.log("详情res", res);
              if (res.code == 200) {
                // for (var itemKey in res.data) {
                //   _this.infoData1[itemKey] = res.data[itemKey];
                // }
                var formatDataObj = this.handleFormatDetailConData(res.data);
                var data = formatDataObj.formatData;
                var goodsDataConfig = formatDataObj.subDataList;
                _this.infoData1 = data;
                _this.goodsDataConfig = goodsDataConfig;
                console.log(_this.goodsDataConfig)
                _this.showPageKey = Math.random().toFixed(4) * 100;
              } else {
                _this.handleShowMessage(res.message);
              }
            },
            (err) => {
              console.log(err);
              _this.$message({
                type: "warning",
                message: err,
              });
            }
          );
        },
        //组件数据格式化
        handleFormatDetailConData (resData){
          var orderStateOpts = {
            "0": "已取消",
            "1": "待支付",
            "2": "待发货",
            "3": "待收货",
            "4": "已完成",
          };
          var payTypeOpts = {
            "1": "微信支付",
            "2": "支付宝支付",
            "3": "商城内部支付"
            // 支付类型  2支付宝支付 3商城内部支付 ,
          }
          var formatData = {};
          formatData['订单编号'] = resData['orderNo'];
          // formatData['会员昵称'] = resData['nickName'];
          formatData['物流单号'] = resData['trackingNum'] || '-';
          formatData['物流公司'] = resData['logisticsCompany'] || '-';
          formatData['物流公司编号'] = resData['logisticsCode'] || '-';
          formatData['订单状态'] = orderStateOpts[resData['orderState']];
          formatData['手机号码'] = resData['linkTel'];
          formatData['下单时间'] = resData['gmtCreated'];
          formatData['支付方式'] = payTypeOpts[resData['payType']];
          //?
          formatData['发货时间'] = resData['gmtModified'];
          formatData['买家留言'] = resData['remark'];
          formatData['-'] = resData['temp'];
          formatData['收货人'] = resData['linkMan'];
          formatData['收货人手机号'] = resData['linkTel'];
          formatData['- -'] = resData['temp'];

          var subDataList = { itemConfig: [], listData: [] };
          if(resData['goodList'] != undefined && resData['goodList'].length > 0) {
          subDataList.itemConfig = [
            {
              headName: "序号",
              variable: "index",
              itemWidth: "150px"
            },
            {
              headName: "商品名称",
              variable: "goodName",
              itemWidth: "200px"
            },
            {
              headName: "数量(个)",
              variable: "num",
              itemWidth: "150px"
            },
            {
              headName: "单价(元)",
              variable: "price",
              itemWidth: "150px"
            },
            {
              headName: "总价格(元)",
              variable: "goodsTotalPrice",
              itemWidth: "150px"
            },
          ];
          //添加序号和总价格
          resData['goodList'].forEach((item, index) => {
            item.index = index + 1;
            item.goodsTotalPrice = Number(item.price) * Number(item.num);
          })
          subDataList.listData = resData['goodList'] || {};
          }
         
          return {
            formatData,
            subDataList,
          };
        }

      };
    },
  },
};
</script>

<style lang="scss" scoped>
// @import '~styles/mixins.scss';
// @import '~styles/variables.scss';

//隐藏样式类
.hidden {
  display: none !important;
}
</style>
